<template>
	<Layout :showBack="false">
		<template #title>提现申请</template>
		<!-- 		<view class="iflex aic jcc fill" style="margin-top: 140rpx;">
			<image style="width: 118rpx; height: 118rpx;" src="/static/image/mine/withdraw-success.icon.png"></image>
		</view> -->

		<!-- <view class="iflex aic jcc fill success-text">提现已申请，等待审核</view>

		<view class="iflex aic jcc fill arcode">
			<image :src="qrcodeUrl"></image>
		</view>

		<view class="iflex aic jcc fill hint">
			长按识别二维码，可联系客服
		</view> -->

		<!-- <view class="iflex asc column aic bank-info">
			<view class="iflex fill aic jcsb bank-info__desc">
				<text>收款账户</text>
				<text>微信</text>
			</view>
			<view class="iflex fill aic jcsb bank-info__desc">
				<text>提现金额</text>
				<text>¥{{amount}}</text>
			</view>
		</view> -->

		<!-- 		<view class="iflex aic jcc fill" style="margin-top: 140rpx;">
			<u-button type="primary" size="large" plain @click.stop="tapToHome">返回首页</u-button>
		</view> -->

		<view class="dialog-wrap iflex aic jcc">
			<view class="iflex dialog-wrap__inner">
				<image class="dialog-wrap__image" src="/static/image/other/withdraw-dialog.png"></image>
				<view class="iflex column dialog-wrap__box">
					<view class="iflex aic jcc dialog-wrap__box__close" @click.stop="tapToHome">
						<image src="/static/image/other/withdraw-dialog-close.png"></image>
					</view>
					<view class="iflex aic jcc fill success-text">提现已申请，等待审核</view>

					<view class="iflex aic jcc fill arcode">
						<image :show-menu-by-longpress="true" :src="qrcodeUrl" @click.stop="tapPreviewImage"></image>
					</view>

					<view class="iflex aic jcc fill hint">
						长按识别二维码，可联系客服
					</view>
				</view>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getWithdrawQrcode } from '@/apis/withdraw';

	const amount = ref('0.00');
	const qrcodeUrl = ref('');

	function tapToHome() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	function tapPreviewImage() {
		uni.previewImage({
			urls: [qrcodeUrl.value]
		})
	}

	function loadData() {
		getWithdrawQrcode().then(res => {
			if (res.code !== 200) return;
			qrcodeUrl.value = res?.data?.qrcodeUrl ?? '';
		})
	}

	onLoad(options => {
		options = options as { amount : string };
		amount.value = options.amount;
		loadData();
	})
</script>

<style lang="scss">
	.dialog-wrap {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: #00000082;
		width: 100%;
		height: 100%;

		&__inner,
		&__image,
		&__box {
			width: 560rpx;
			height: 554rpx;
			border-radius: 24rpx;
		}

		&__inner {
			background: #FFF;
		}

		&__box {
			position: absolute;
			top: 0;
			left: 0;
			padding-top: 78rpx;

			&__close {
				position: absolute;
				top: 0;
				right: 0;
				padding: 18rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}


	.success-text {
		color: #222222;
		font-size: 34rpx;
		font-style: normal;
		font-weight: 500;
	}

	.arcode {
		padding: 30rpx 0 38rpx 0;

		image {
			width: 260rpx;
			height: 260rpx;
			flex-shrink: 0;
			background: #D8D8D8;
		}
	}

	.hint {
		color: #878788;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
	}

	.bank-info {
		margin-top: 140rpx;
		padding: 18rpx 32rpx;
		width: 688rpx;
		border-radius: 6rpx;
		background: #FFF;

		&__desc {
			padding: 30rpx 0;

			text:first-child {
				color: #737d91;
				font-size: 30rpx;
				font-weight: 400;
			}

			text:last-child {
				color: #000000;
				font-size: 30rpx;
				font-weight: 400;
			}
		}
	}
</style>